<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <link rel="stylesheet" th:href="@{/resources/font-awesome/css/font-awesome.min.css}" href="../resources/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" th:href="@{/resources/css/pluginsExt/common.css}" href="css/pluginsExt/webSite.css"/>
    <link rel="stylesheet" href="css/pluginsExt/forgetPsw/forgetPsw.css"/>
</head>
<body>
<div>
        <div class="Head">
            <div class="w">
                <h2>优 茶</h2>
                <h4>找回密码</h4>
            </div>
        </div>
        <div class="content clearfix">
            <div class="w">
                <div class="reg-nav">
                    <ul class="clearfix">
                        <li class="active"><i>1</i><span>输入账户名</span></li>
                        <li class=""><i>2</i><span>验证身份</span></li>
                        <li class=""><i>3</i><span>重置密码</span></li>
                        <li class=""><i class="fa fa-check"></i><span>重置成功</span></li>
                    </ul>
                </div>
                <form action="" method="post" id="userNameForm">
                    <div class="reg-main clearfix">
                        <div class="input-contr">
                            <i class="fa fa-user"></i><input class="userName form-contr" name="userName"  maxlength="35" placeholder="请输入您的邮箱 或 已验证手机号" type="text">
                        </div>
                        <div class="input-contr clearfix authCode">
                            <i class="fa fa-table"></i>
                            <input class="form-contr" name="feedCode" maxlength="10" placeholder="请输入验证码" type="text"/>
                            <a href="javascript:;"><img src="img/locate/code.jpg" alt=""/></a>
                            <a href="javascript:;" style="color:#0685d4;">换一张</a>
                        </div>
                        <div class="input-contr">
                            <input class="reg-btn nextAuthenticate" type="submit" value="下一步">
                        </div>
                    </div>
                </form>
                <form action="" method="post" id="authenticateForm">
                    <div class="reg-main clearfix" style="margin-top: 50px">
                        <div class="input-contr" style="padding-bottom: 10px">
                            手机号：
                            <s class="tblue">186******90</s>
                        </div>
                        <div class="input-contr">
                            <i class="fa fa-mobile-phone" style="font-size: 28px"></i>
                            <input type="text" name="msgCode" class="form-contr" placeholder="请输入收到的短信验证码"/>
                            <input type="button" value="获取短信验证码" class="getCode">
                        </div>
                        <div class="input-contr clearfix authCode">
                            <i class="fa fa-credit-card" style="left: 9px"></i>
                            <input type="text" name="cardNum" class="form-contr" placeholder="请输入您的证件号码：身份证/其他证件号码"/>
                        </div>
                        <div class="input-contr">
                            <input type="submit" class="reg-btn" value="下一步"/>
                            <br/>
                            <a href="#" class="tblue">选择其他验证方式></a>
                        </div>
                    </div>
                </form>
                <form action="" method="post" id="setNewPswForm">
                    <div class="msg-tips">
                        <i class="fa fa-check-circle"></i>
                        &nbsp;&nbsp;验证已通过，您可以设置新的密码！
                    </div>
                    <div class="reg-main clearfix" style="margin-top: 20px">
                        <div class="input-contr">
                            <span class="">新密码:</span>
                            <input onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value) type="password" name="password" id="Newpassword" class="form-contr" placeholder="6-20个字符，由字母、数字和符号的组成" style="padding-left: 8px;padding-right: 62px"/>
                            <ul class="pswStrCheck fr">
                                    <li>安全程度:</li>
                                    <li id="strength_L">弱</li>
                                    <li id="strength_M">中</li>
                                    <li id="strength_H">强</li>
                            </ul>
                        </div>
                        <div class="input-contr clearfix">
                            <span >确认密码:</span>
                            <input type="password" name="confirm_password" class="form-contr" placeholder="请再次输入新密码" style="padding-left: 8px;padding-right: 62px"/>
                        </div>
                        <div class="input-contr">
                            <input type="submit" class="reg-btn" value="确定"/>
                        </div>
                    </div>
                </form>
                <div class="resetSuccess">
                        <div class="reg-main" style="text-align: center">
                            <div style="margin-bottom: 40px;">
                                <s class="fa fa-check" style="font-size: 45px;color: #00c800;"></s>
                                <span style="font-size:22px;color:#00c800;">新密码设置成功！请牢记您的新密码。</span>
                            </div>
                            <h4><b id="Num">10</b>&nbsp;秒内自动关闭当前页面</h4>
                            <br>
                            <a href="javascript:;" class="btn-close">立即关闭页面</a>
                        </div>
                </div>
                </div>
            </div>
        </div>
</body>
<!--[if gte IE 7]>
<script th:src="@{/resources/js/jquery-1.11.3.min.js}" src="../resources/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if !IE]><!-->
<script th:src="@{/resources/js/jquery-2.2.3.min.js}" src="../resources/js/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script th:src="@{/resources/js/plugins/jqValidate/validate.min.js}" src="../resources/js/plugins/validate/jquery.validate.min.js"></script>
<script th:src="@{/resources/js/pluginsExt/locate/locateCommon.js}" src="js/pluginsExt/locate/locateCommon.js"></script>
<script th:src="@{/resources/js/pluginsExt/footer/login-footer.js}" src="js/pluginsExt/footer/login-footer.js"></script>
<script src="js/pluginsExt/forgetPsw/forgetPsw.js"></script>
</html>